import {produce, enablePatches, applyPatches, produceWithPatches } from 'immer';
enablePatches();

const baseState = {
  record: {
    'record-1': [1,2,3],
    'record-2': [4,5,6],
  } 
};
// 重做
// const changes = [];
// const inverseChanges = [];
// const nextState = produce(
//   baseState,
//   draft => {
//     draft.record['record-1'][1] = 21111;
//     delete draft.record['record-2'];
//     draft.record['record-3'] = [7,8,9];
//   },
//   (patches, inversePatches) => {
//       changes.push(...patches)
//       inverseChanges.push(...inversePatches)
//   }
// );

const [nextState, changes, inverseChanges] = produceWithPatches(baseState,
  draft => {
    draft.record['record-1'][1] = 21111;
    delete draft.record['record-2'];
    draft.record['record-3'] = [7,8,9];
  }
);

console.log(`
baseState: ${JSON.stringify(baseState)}
nextState: ${JSON.stringify(nextState)}
changes: ${JSON.stringify(changes, null, 1)}
inverseChanges: ${JSON.stringify(inverseChanges, null, 1)} 
`);


// 撤回 值的撤回 不是引用撤回
const nextState2 = applyPatches(baseState, inverseChanges);

console.log(`
baseState: ${JSON.stringify(baseState)}
nextState: ${JSON.stringify(nextState2)}
`);



export const Base = () => {

  return <div>immer</div>
}